<template>
  <div class="container">
    <el-row class="mb10">
      <el-col :span="16" align="left">
        <div class="flex">
          <el-input
            clearable
            v-model="searchParams.name"
            placeholder="项目名称"
            style="width: 120px; margin-right: 15px"
          >
          </el-input>

          <el-input
            clearable
            v-model="searchParams.name"
            placeholder="申报单位"
            style="width: 120px; margin-right: 15px"
          >
          </el-input>
          
          <el-select
            clearable
            v-model="searchParams.maintainUnitId"
            placeholder="维护单位"
          >
            <el-option
              :label="el.belongingUnit"
              :value="el.belongingCode"
              :key="k"
              v-for="(el, k) in options.unitnameList"
            />
          </el-select>
          <el-select clearable v-model="searchParams.softStateId" placeholder="软著状态">
            <el-option
              :label="el.itemText"
              :value="el.id"
              :key="k"
              v-for="(el, k) in options.SoftnessList"
            />
          </el-select>
          <el-button color="#626aef" @click="getListData">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExport()"> 批量导出</el-button>
        <el-button type="danger" @click="deleteList()">批量删除</el-button>
        <el-button type="primary" @click="handleAdd()">立项申请</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="allTableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column
        :prop="el.type"
        :label="el.label"
        :key="k"
        v-for="(el, k) in data.columns"
      />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" :disabled="row.isLock == 1" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            v-if="row.status == '待确认'"
            size="small"
            type="primary"
            @click="handleConfirm(row)"
            >确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="tc mt15">
      <el-pagination
        background
        v-model:current-page="page.page"
        v-model:page-size="page.pageSize"
        layout="prev, pager, next ,total,sizes,jumper"
        :total="page.total"
        :page-size="page.pageSize"
        @size-change="getListData"
        @current-change="getListData"
      />
    </div>

    <!--新增、修改、确认弹框-->
    <el-dialog
      v-model="data.dialogVisible"
      width="900px"
      @close="handleClose"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :initData="data.initData" label="基本信息" name="first">
              <el-form
                :rules="rules"
                ref="ruleFormRef"
                :model="data.ruleForm"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="软件名称" prop="name">
                      <el-input
                        placeholder="请输入"
                        v-model="data.ruleForm.name"
                        style="width: 250px"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="首次发表日期" prop="firstPublicDate">
                      <el-date-picker
                        v-model="data.ruleForm.firstPublicDate"
                        type="datetime"
                        value-format="YYYY-MM-DD"
                        placeholder="选择日期"
                        clearable
                        style="width: 250px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="登记号" prop="registerNo">
                      <el-input
                        placeholder="请输入"
                        v-model="data.ruleForm.registerNo"
                        style="width: 250px"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="维护单位" prop="maintainUnitId">
                      <el-select
                        v-model="data.ruleForm.maintainUnitId"
                        placeholder="请选择"
                        style="width: 250px"
                      >
                        <el-option
                          :label="el.name"
                          :value="el.id"
                          :key="k"
                          v-for="(el, k) in options.belongingunitList"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="著作权人" prop="copyOwnerId">
                      <el-select
                        v-model="data.ruleForm.copyOwnerId"
                        placeholder="请选择"
                        style="width: 250px"
                      >
                        <el-option
                          :label="el.username"
                          :value="el.userId"
                          :key="k"
                          v-for="(el, k) in options.yhrenList"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发证日期" prop="issueDate">
                      <el-date-picker
                        v-model="data.ruleForm.issueDate"
                        type="datetime"
                        value-format="YYYY-MM-DD"
                        placeholder="选择日期"
                        clearable
                        style="width: 250px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属项目" prop="projectId">
                      <el-select
                        v-model="data.ruleForm.projectId"
                        placeholder="请选择"
                        style="width: 250px"
                      >
                        <el-option
                          :label="el.projectname"
                          :value="el.id"
                          :key="k"
                          v-for="(el, k) in options.xmlbList"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="技术分类" prop="techClassId">
                      <el-select
                        v-model="data.ruleForm.techClassId"
                        placeholder="请选择"
                        style="width: 250px"
                      >
                        <el-option
                          :label="el.itemText"
                          :value="el.itemValue"
                          :key="k"
                          v-for="(el, k) in options.jsflList"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="软著状态" prop="softStateId">
                      <el-select
                        v-model="data.ruleForm.softStateId"
                        placeholder="请选择"
                        style="width: 250px"
                      >
                        <el-option
                          :label="el.itemText"
                          :value="el.itemValue"
                          :key="k"
                          v-for="(el, k) in options.awardList"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item
                  label="证书存放地"
                  prop="saveAddress"
                  @click="choosePersion"
                >
                  <el-input
                    :style="{ width: '680px' }"
                    v-model="data.ruleForm.saveAddress"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                    type="textarea"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input
                    :style="{ width: '680px' }"
                    v-model="data.ruleForm.remark"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                    type="textarea"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="second">
              <platformFiles :files="data.files" @dataChange="dataChange"></platformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="third" v-if="data.addFlag == 1">
              <el-table
                :data="changeList"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
              >
                <el-table-column prop="name" label="修改人" />
                <el-table-column prop="changeTime" label="修改时间" />
                <el-table-column prop="changeNode" label="修改字段" />
                <el-table-column prop="changeBefore" label="修改前内容" />
                <el-table-column prop="changeAfter" label="修改后内容" />
              </el-table>
              <div class="flex space-between align-center mt20">
                <el-pagination
                  background
                  layout="prev, pager, next ,total,sizes,jumper"
                  :total="page.total"
                  :page-size="page.pageSize"
                  @current-change="getListData"
                  @size-change="getListData"
                  :current-page="page.page"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!--选择热参与人员弹框-->
    <el-dialog
      v-model="data.persionDialogVisible"
      width="900px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-row style="border-bottom: 1px solid black; padding-bottom: 10px">
        <el-col>
          <span style="font-size: 20px">员工列表</span>
          <el-button style="margin-left: 600px" @click="data.persionDialogVisible = false"
            >关闭</el-button
          >
          <el-button
            style="margin-left: 50px"
            type="primary"
            @click="data.persionDialogVisible = false"
            >选择
          </el-button>
        </el-col>
      </el-row>
      <el-form style="margin-top: 20px">
        <el-row>
          <el-form-item style="margin-left: 500px">
            <el-input v-model="searchJoin.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 50px">
            <el-select v-model="searchJoin.unitOrg" placeholder="请选择">
              <el-option
                :label="el.belongingUnit"
                :value="el.belongingCode"
                :key="k"
                v-for="(el, k) in options.belongingunitList"
              />
            </el-select>
          </el-form-item>
          <el-button type="success" style="height: 20px; margin-left: 50px"
            >搜索</el-button
          >
        </el-row>
      </el-form>
      <el-table
        style="margin-top: 10px"
        :data="allJoinList"
        @selection-change="sltJoinList"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cname" label="姓名"></el-table-column>
        <el-table-column label="归属单位">
          <template #default="{ row }">
            <template v-for="(v, i) in options.belongingunitList" :key="i">
              <span v-if="v.belongingCode == row.unitOrg">{{ v.belongingUnit }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="gendertext" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="selectOrgs" label="职务"></el-table-column>
        <el-table-column prop="technicalTitle" label="职称"></el-table-column>
      </el-table>
      <div class="tc mt15" align="right">
        <el-pagination
          background
          layout="prev, pager, next ,total,sizes,jumper"
          :total="pageJoin.total"
          :page-size="pageJoin.pageSize"
          @current-change="getJoinList"
          @size-change="getJoinList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import { downloadFile } from "@/utils/utils";
import { Modals, tips } from "@/views/science/components/tips/tips";
import platformFiles from "@/views/science/technologyStrength/components/platformFiles/platformFiles.vue";
import record from "@/views/science/technologyStrength/components/record/record.vue";
import type { ElForm } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { ObjectType } from "typings/interfaces";
import { onMounted, reactive, ref, watch } from "vue";
import { getJoinPersons } from "../../api/double";
import tableData from "./tableHeader.json";
type FormInstance = InstanceType<typeof ElForm>;

export default {
  components: {
    platformFiles,
    record,
  },
  props: {
    initData: {
      type: Object,
      required: true,
    },
    initNum: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    let selectedRows: ObjectType[] = [];
    //列表显示的字段
    //模态框以及信息栏是否显示
    let data = reactive({
      columns:tableData.lxsqTableHeader,
      initData: {},
      addFlag: 0, //变更记录是否显示
      orgAllList: "",
      recordShow: false,
      dialogVisible: false, //  新增修改确认项目弹框
      persionDialogVisible: false, //  选择参与人员弹框
      reDate: "",
      ruleForm: {
        name: "", // 软件名称
        firstPublicDate: "", // 首次发表日期
        registerNo: "", // 登记号
        maintainUnitId: "", //维护单位id
        maintainUnit: "", // 维护单位
        copyOwnerId: "", //著作权人id
        copyOwner: "", // 著作权人
        issueDate: "", // 发证日期
        projectId: "", //所属项目id
        projectName: "", //所属项目
        techClassId: "", //技术分类id
        techClass: "", //技术分类
        softStateId: "", //软著状态id
        softState: "", //软著状态
        saveAddress: "", // 证书存放地
        remark: "", // 备注
      },
      files: [],
      allTableData: [],
    });
    const page = {
      page: 1,
      pageSize: 10,
      total: 0,
    };
    let selectArr: Config[] = reactive([]);
    const handleSelectionChange = (val) => {
      selectArr = val;
    };
    let loading = ref(true);
    // 查询参数
    let searchParams = reactive({
      name: "",
      maintainUnitId: "",
      softStateId: "",
    });
    //进入获取表单数据
    let getListData = () => {
      selectArr = [];
      loading.value = true;
      return request({
        url: proxy.CHECC_API_CMS + "/kjsl/tresult/copyrights/list",
        method: "post",
        params: {
          current: page.page,
          size: page.pageSize,
          ...searchParams,
        },
      })
        .then((res) => {
          console.log("获取表单列表", res.data.data);
          let resData = res.data.data;
          allTableData.value = resData.records;
          page.total = resData.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };
    getListData();
    //主页面表格初始化

    //新增
    const ruleFormRef = ref();
    //新增按钮
    const handleAdd = () => {
      editId = "";
      ruleFormRef.value.resetFields();
      data.initData = {};
      data.dialogVisible = true;
      data.addFlag = 0;
      ruleFormRef.value.clearValidate();
    };
    const handleClose = () => {
      for (let key in data.ruleForm) {
        data.ruleForm[key] = "";
      }
    };
    // 判断
    const rules = reactive({
      name: [{ required: true, message: "请输入软件名称", trigger: "blur" }],
      firstPublicDate: [
        { required: true, message: "请选择首次发表日期", trigger: "change" },
      ],
      maintainUnit: [{ required: true, message: "请选择维护单位", trigger: "change" }],
      copyOwner: [{ required: true, message: "请选择著作权人", trigger: "change" }],
      issueDate: [{ required: true, message: "请选择发证日期", trigger: "change" }],
      projectName: [{ required: true, message: "请选择所属项目", trigger: "change" }],
      techClass: [{ required: true, message: "请选择技术分类", trigger: "change" }],
      softState: [{ required: true, message: "请选择软著状态", trigger: "change" }],
    });
    const ruleForm = reactive({
      // ruleForm.joinPersionList = []
      // joinPersionList: [{id: 0, name: ''}], // 参与人员列表
    });
    // 保存按钮
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        // 承担单位
        let obj1 = options.belongingunitList.filter((item) => {
          console.log("传值单位列表:{}", item);
          return item.id === data.ruleForm.maintainUnitId;
        });
        data.ruleForm.maintainUnit = obj1[0]?.name ?? null;

        let obj2 = options.yhrenList.filter((item) => {
          return item.userId === data.ruleForm.copyOwnerId;
        });
        data.ruleForm.copyOwner = obj2[0]?.username ?? null;

        let obj3 = options.jsflList.filter((item) => {
          return item.itemValue === data.ruleForm.techClassId;
        });
        data.ruleForm.techClass = obj3[0]?.itemText ?? null;

        let obj4 = options.awardList.filter((item) => {
          return item.itemValue === data.ruleForm.softStateId;
        });
        data.ruleForm.softState = obj4[0]?.itemText ?? null;

        let obj5 = options.xmlbList.filter((item) => {
          return item.id === data.ruleForm.projectId;
        });
        data.ruleForm.projectName = obj5[0]?.itemText ?? null;

        if (valid) {
          const config: Record<string, any> = {
            info: {
              name: data.ruleForm.name, // 软件名称
              firstPublicDate: data.ruleForm.firstPublicDate, // 首次发表日期
              registerNo: data.ruleForm.registerNo, // 登记号
              maintainUnitId: data.ruleForm.maintainUnitId, //维护单位id
              maintainUnit: data.ruleForm.maintainUnit, // 维护单位
              copyOwnerId: data.ruleForm.copyOwnerId, //著作权人id
              copyOwner: data.ruleForm.copyOwner, // 著作权人
              issueDate: data.ruleForm.issueDate, // 发证日期
              projectId: data.ruleForm.projectId, //所属项目id
              projectName: data.ruleForm.projectName, //所属项目
              techClassId: data.ruleForm.techClassId, //技术分类id
              techClass: data.ruleForm.techClass, //技术分类
              softStateId: data.ruleForm.softStateId, //软著状态id
              softState: data.ruleForm.softState, //软著状态
              saveAddress: data.ruleForm.saveAddress?.trim?.() ?? null, // 证书存放地
              remark: data.ruleForm.remark?.trim?.() ?? null, // 备注
            },
            files: data.files,
          };
          if (editId) config.info.id = editId;
          else Reflect.deleteProperty(config.info, "id");
          loading.value = true;
          return request({
            url:
              proxy.CHECC_API_CMS +
              `/kjsl/tresult/copyrights/${editId ? "update" : "add"}`,
            method: "post",
            data: config,
          }).then(() => {
            getListData();
            data.dialogVisible = false;
            return ElMessage({
              message: "操作成功",
              type: "success",
            });
          });
        }
      });
    };

    const handleEditItem = (row) => {
      console.log(row);

      row.isEdit = true;
    };
    const cancelItem = (row) => {
      row.isEdit = false;
    };

    //编辑按钮
    let editId = "";
    const handleEdit = (row) => {
      editId = row.id;
      for (let key in data.ruleForm) {
        for (let key2 in row) {
          if (key === key2) {
            data.ruleForm[key] = row[key2];
          }
        }
      }
      data.addFlag = 1;
      data.dialogVisible = true;
    };
    //确认按钮
    let handleConfirm = (row) => {
      editId = row.id;
      request({
        url: proxy.CHECC_API_CMS + `/kjsl/tresult/copyrights/confirm/${editId}`,
        method: "get",
      }).then(() => {
        ElMessage({
          message: "确认成功",
          type: "success",
        });
        getListData();
      });
    };

    let deleteList = () => {
      if (!selectArr.length) {
        ElMessage({
          message: "请选择",
          type: "warning",
        });
        return;
      }
      ElMessageBox.confirm("是否删除选择内容", "提示", {
        type: "warning",
      })
        .then(() => {
          loading.value = true;
          let sdt = selectArr.map((el) => el.id);
          // join()
          return request({
            url: proxy.CHECC_API_CMS + `/kjsl/tresult/copyrights/delete/${sdt}`,
            method: "delete",
          }).then((res) => {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            selectArr = [];
            getListData();
          });
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };

    const getLock = async () => {
      console.log(selectArr);
      if (selectArr.length == 1) {
        Modals("是否锁定选择内容", "提示", "warning").then(async () => {
          loading.value = true;

          return request({
            url: proxy.CHECC_API_CMS + `/kjsl/tresult/copyrights/lock/${selectArr[0].id}`,
            method: "get",
          })
            .then((res) => {
              if (res.data.success) {
                tips("锁定成功", "success");
                getListData();
              }
            })
            .catch(() => {
              console.log("点击了取消");
            });
        });
      } else if (selectArr.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("锁定功能不可批量操作", "warning");
      }
    };

    const getUnlock = async () => {
      if (selectArr.length == 1) {
        Modals("是否解锁选择内容", "提示", "warning").then(async () => {
          return request({
            url:
              proxy.CHECC_API_CMS + `/kjsl/tresult/copyrights/unlock/${selectArr[0].id}`,
            method: "get",
          })
            .then((res) => {
              if (res.data.success) {
                tips("解锁成功", "success");
                getListData();
              }
            })
            .catch(() => {
              console.log("点击了取消");
            });
        });
      } else if (selectArr.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("解锁功能不可批量操作", "warning");
      }
    };

    const getExport = async () => {
      Modals("是否导出全部数据", "提示", "warning")
        .then(async () => {
          selectArr = [];
          loading.value = true;
          return request({
            url: proxy.CHECC_API_CMS + "/kjsl/tresult/copyrights/export",
            method: "post",
            responseType: "blob",
            params: {
              page: page.page,
              pageSize: page.pageSize,
              ...searchParams,
            },
          })
            .then((res) => {
              const name = `科技成果_${moment().valueOf()}.xlsx`;
              const url = URL.createObjectURL(res.data);
              downloadFile(url, name);
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };
    //page分页
    let getpageData = () => {
      selectArr = [];
      loading.value = true;
      return request({
        url: proxy.CHECC_API_CMS + "/kjsl/tresult/copyrights/list",
        method: "post",
        params: {
          current: page.page,
          size: page.pageSize,
          ...searchParams,
        },
      })
        .then((res) => {
          console.log("获取表单列表", res.data.data);
          let resData = res.data.data;
          allTableData.value = resData.records;
          page.total = resData.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    const options: any = reactive({
      unitnameList: [],
      affiliationList: [],
      SoftnessList: [],
      classnameList: [],
      competitionclassList: [],
      belongingunitList: [],
      awardList: [],
      zlztList: [],
      jsflList: [],
      xmlbList: [],
      yhrenList: [],
    });

    // 单位
    const unitname = () => {
      request({
        url: "/checc-api/kgptKjslTchieveSttrans/unitname",
        method: "post",
      }).then((res) => {
        console.log("获取单位列表:{}", res.data.data);
        options.unitnameList = res.data.data;
      });
    };
    //承载单位
    const czdw = () => {
      request({
        url: "/checc-api/kjsl/common/getOrgsByLoginUser",
        method: "get",
      }).then((res) => {
        console.log("587承载单位:{}", res.data.data);
        options.belongingunitList = res.data.data;
      });
    };
    //用户单位
    const yonghu = () => {
      request({
        url: "/checc-api/user/getAll",
        method: "get",
      }).then((res) => {
        console.log("587用户单位:{}", res.data.data);
        options.yhrenList = res.data.data;
      });
    };

    // 项目
    const xmlb = () => {
      request({
        url: "/checc-api/xmzx/projectManagement/undertakeunit",
        method: "post",
      }).then((res) => {
        console.log("项目:{}", res.data.data);
        options.xmlbList = res.data.data;
      });
    };
    // 字段获取
    const affiliation = () => {
      request({
        url: proxy.CHECC_API_CMS + "/dictItem/codelist",
        method: "post",
        data: [
          "KJSL_PATENT_STATUS",
          "KJSL_PATENT_TYPE",
          "KJSL_PATENT_STATUS",
          "KJSL_BUSINESS_SECTOR",
          "KJSL_SOFT_STATE",
        ],
      }).then((res) => {
        console.log("所属权:{}", res.data.data.KJSL_PATENT_STATUS);
        options.affiliationList = res.data.data.KJSL_PATENT_STATUS;

        console.log("专利类型:{}", res.data.data.KJSL_PATENT_TYPE);
        options.competitionclassList = res.data.data.KJSL_PATENT_TYPE;

        console.log("专利状态:{}", res.data.data.KJSL_PATENT_STATUS);
        options.zlztList = res.data.data.KJSL_PATENT_STATUS;

        console.log("技术分类:{}", res.data.data.KJSL_BUSINESS_SECTOR);
        options.jsflList = res.data.data.KJSL_BUSINESS_SECTOR;

        console.log("软著状态:{}", res.data.data.KJSL_SOFT_STATE);
        options.awardList = res.data.data.KJSL_SOFT_STATE;
      });
    };

    onMounted(() => {
      unitname();
      affiliation();
      xmlb();
      czdw();
      yonghu();
    });
    watch(
      () => props.initData,
      (newValue, oldValue) => {
        if (JSON.stringify(newValue) !== "{}") {
          for (let key in ruleForm) {
            for (let key2 in newValue) {
              if (key === key2) {
                ruleForm[key] = newValue[key2];
              }
            }
          }
        } else {
          for (let key in ruleForm) {
            ruleForm[key] = "";
          }
        }
      },
      { deep: true, immediate: true }
    );

    watch(
      () => props.initNum,
      (newValue) => {
        // console.log(newValue, 'newValue');
        // ruleForm = reactive({ ...newValue })
      }
    );

    let changeList = ref([
      {
        name: "张三",
        changeTime: "2023-03-20",
        changeNode: "转换金额",
        changeBefore: "200",
        changeAfter: "100",
      },
      {
        name: "李四",
        changeTime: "2023-03-20",
        changeNode: "类别",
        changeBefore: "类别1",
        changeAfter: "类2",
      },
    ]);

    //初始页面和数据
    const activeName = ref("first");
    const budgetYear = ref("2023");
    const choosePersion = () => {
      // 选择参与人员按钮事件
      data.persionDialogVisible = true;
      getJoinList();
    };

    const sort = {
      orderBy: "default",
      orderType: "",
    };

    // 列表
    let allTableData = ref([]);

    interface Config {
      id: string;
    }

    const test = (v) => {
      console.log("值变化", v);
    };

    // 参与人员列表
    let allJoinList = ref([]);
    let searchJoin = reactive({
      name: "", //名称
      unitOrg: "", //机构ID
    });
    let pageJoin = {
      page: 1,
      pageSize: 10,
      total: 0,
    };
    const getJoinList = () => {
      getJoinPersons({
        current: pageJoin.page,
        size: pageJoin.pageSize,
        ...searchJoin,
      }).then((res) => {
        console.log("参与人员列表de", res);
        let resData = res.data.data;
        allJoinList.value = resData.records;
        pageJoin.total = resData.total;
      });
      // .finally(() => {})
    };
    const clrJoin = (e) => {
      console.log("删除的参与人员", e);
    };

    return {
      data, //数据库
      allTableData, //新增修改的表单数据
      ruleForm, //新增表单数据
      ruleFormRef, //加载表单数据
      rules,
      submitForm, //新增保存
      handleAdd, // 新增
      handleEdit, //编辑
      handleClose,
      handleEditItem,
      cancelItem,
      handleConfirm, //确认
      getListData, // 获取列表信息
      getpageData, // 分页信息

      deleteList, //删除list
      selectArr, //选择的list
      getLock,
      getUnlock,
      getExport,
      changeList, //变更记录
      options, //维护单位字典
      page,
      selectedRows,
      searchParams,
      //下拉选
      unitname,
      //字段取值
      choosePersion,
      activeName,
      budgetYear,

      //参与人员列表
      getJoinList,
      allJoinList,
      searchJoin,
      pageJoin,

      clrJoin,
      handleSelectionChange,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}

.el-col {
  line-height: 40px;
}

.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/ .el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.tc {
  text-align: center;
}
</style>
